<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Web Developer技能树</title>
  <meta name="description" content="要月薪上万，你要掌握的技能还真不少。看看你掌握了哪些Web Developer所需要的技能，看看你发展到了什么程度?">
  <meta name="google-site-verification" content="3-n5j67nVlQ0ICC3DJb28FXuJI7pEei5v2kx7AR8eHU" />
  <meta name="keywords" content="Web技能树,web,技能">
  <link href="app/styles/layout.css" rel="stylesheet">
  <link href="app/styles/icon.css" rel="stylesheet">
  <link href="app/styles/logo.css" rel="stylesheet">
</head>
<body>
<div class="ltIE9-hide">
  <span class="github-btn github-stargazers github-btn-large"> <a class="gh-btn" href="https://github.com/phodal/skillock/" target="_blank"><span class="gh-ico"></span> <span class="gh-text">Star</span></a> </span>
  <span class="github-btn github-me github-btn-large"> <a class="gh-btn" id="gh-btn" href="https://github.com/phodal" target="_blank"><span class="gh-ico"></span> <span class="gh-text" id="gh-text">Follow @phodal</span></a> <a class="gh-count" id="gh-count" href="https://github.com/phodal/followers" target="_blank"></a>
  </span>
  <div class="page open">
    <div class="talent-tree">
      <h2 class="start-helper" data-bind="css:{active:noPointsSpent}">从这开始!</h2>
      <!--ko foreach: skills-->
      <!--ko if: hasDependencies-->
      <div
        data-bind="css: { 'can-add-points': canAddPoints, 'has-points': hasPoints, 'has-max-points': hasMaxPoints }, attr: { 'data-skill-id': id }"
        class="skill">
        <div data-bind="css: { active: dependenciesFulfilled }" class="skill-dependency"></div>
      </div>
      <!--/ko-->
      <!--/ko-->
      <!--ko foreach: skills-->
      <div data-bind="css: { 'can-add-points': canAddPoints, 'has-points': hasPoints, 'has-max-points': hasMaxPoints }, attr: { 'data-skill-id': id }" class="skill">
        <div class="icon-container">
          <div class="icon"></div>
        </div>
        <div class="frame">
          <div class="tool-tip">
            <h3 data-bind="text: title" class="skill-name"></h3>
            <div data-bind="html: description" class="skill-description"></div>
            <ul class="skill-links">
              相关博客或内容:
              <!--ko foreach: links-->
              <li> <a data-bind="attr: { href: url }, text: label" target="_blank"></a> </li>
              <!--/ko-->
              相关书籍:
              <!--ko foreach: books-->
              <li> <a data-bind="attr: { href: url }, text: label" target="_blank"></a> </li>
              <!--/ko-->
            </ul>
            <hr data-bind="visible: currentRankDescription() || nextRankDescription()">
            <div data-bind="if: currentRankDescription" class="current-rank-description">当前: <span
              data-bind="	text: currentRankDescription"></span></div>
            <div data-bind="if: nextRankDescription" class="next-rank-description">下一个: <span
              data-bind="	text: nextRankDescription"></span></div>
            <hr>
            <ul class="stats">
              <!--ko foreach: stats-->
              <li><span class="value">+<span data-bind="text: value"></span></span> <span data-bind="	text: title" class="title"></span></li>
              <!--/ko-->
            </ul>
            <!--ko if: talentSummary-->
            <div class="talent-summary">技能 <span data-bind="text: talentSummary"></span></div>
            <!--/ko-->
            <div data-bind="text: helpMessage" class="help-message"></div>
          </div>
          <div class="skill-points"><span data-bind="text: points" class="points"></span>/<span data-bind="	text: maxPoints" class="max-points"></span></div>
          <div data-bind="click: addPoint, rightClick: removePoint" class="hit-area"></div>
        </div>
      </div>
      <!--/ko-->
    </div>
    <div class="avatar">
      <h2 class="start-helper-avatar" data-bind="css:{active:noAvatarName}">输入姓名</h2>
      <div class="portrait">
        <img data-bind="attr: { src: portraitURL }"></div>
      <div class="portrait-controls">
        <button data-bind="click: choosePreviousPortrait">&laquo;</button>
        <button data-bind="click: chooseNextPortrait">&raquo;</button>
      </div>
      <div class="details post-content">
        <input data-bind="value: avatarName" class="h2">

        <div class="level">Level <span data-bind="	text: level" class="value"></span> Web Developer</div>
        <div data-bind="text: talentSummary" class="talent-summary"></div>
        <ul class="stats">
          <!--ko foreach: stats-->
          <li><span data-bind="text: title" class="title"></span>:
            <span data-bind="	text: value" class="value"></span>
          </li>
          <!--/ko-->
        </ul>
      </div>
    </div>
    <div class="helper">
      <button data-bind="click: clear">Clear & Build</button>
      <br/>
      <br/>
      <h3><a href="https://github.com/phodal/skilltree">快来围观!新版本技能树</a></h3>
      <h2 class="share-helper" data-bind="css:{active:canShare}">分享</h2>
    </div>
  </div>
</div>
<script type="text/javascript" data-main="app/scripts/main.js" src="app/lib/require.js"></script>
</body>
<script type="text/javascript" >
  var jiathis_config=window.jiathis_config;
</script>
<div class="ds-thread" data-thread-key="1" data-title="Web技能树" data-url="http://skill.phodal.com" data-image="http://skill.phodal.com/app/images/portraits/portrait-1.jpg" data-thread="hello"></div>
<script type="text/javascript">
  var duoshuoQuery = {short_name: "skillock"};
  (function () {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';
    ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-60073009-1', 'auto');
  ga('send', 'pageview');
</script>
</html>
